<template>
  <div>
    <el-form :model="form">
      <el-form-item label="文字">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.type" placeholder="please select your zone">
          <el-option label="primary" value="primary" />
          <el-option label="success" value="success" />
          <el-option label="info" value="info" />
          <el-option label="danger" value="danger" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否禁用">
        <el-switch v-model="form.disabled" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { watch, defineProps,defineEmits, ref } from "vue";
let form = ref({
  disabled: false,
  name: "按钮",
  type: "primary",
});
let it_id=ref('')
const emit = defineEmits(['changeForm'])
const props = defineProps({
  data: Object,
});
watch(
  props,
  (newValue) => {
    if (Object.keys(newValue.data).length !== 0) {
      form.value = {
        ...newValue.data.options,
      };
      it_id.value=newValue.data.it_id
    }
  },
  { deep: true, immediate: true }
);
watch(
  form.value,
  (newValue) => {
    console.log(newValue, "form艾比");
    emit('changeForm',newValue,it_id.value)
  },
  { deep: true, immediate: true }
);
</script>
